<template>
  <div id="article">
    <div class="article-wrap">
      <!-- 文章管理标题 -->
      <p class="article-list-title">文章列表</p>
      <div class="article-list-wrap">
        <!-- 文章筛选 -->
        <div class="al-select-wrap">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- 分类筛选 -->
            <el-form-item label="标签">
              <el-select v-model="formInline.category_id" placeholder="全部">
                <el-option label="全部" value></el-option>
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="(item, index) in category"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 热门筛选 -->
            <el-form-item label="热门">
              <el-select v-model="formInline.hots" placeholder="全部">
                <el-option label="全部" value></el-option>
                <el-option label="热门" :value="1"></el-option>
                <el-option label="普通" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit">筛选</el-button>
            </el-form-item>
          </el-form>
          <!-- 搜索文章 -->
          <div class="srach-wrap">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="toSearch"></el-input>
            <el-button type="primary" @click="$router.push('/articleadd')">搜索文章</el-button>
          </div>
          <!-- 发布文章 -->
          <div class="articleAdd-wrap">
            <el-button type="primary" @click="$router.push('/articleadd')">发布文章</el-button>
          </div>
        </div>
        <!-- 文章展示 -->
        <el-table ref="singleTable" :data="article" highlight-current-row style="width: 100%">
          <el-table-column type="index" width="70"></el-table-column>
          <el-table-column property="title" label="标题" width="200"></el-table-column>
          <el-table-column label="图片" width="200">
            <template slot-scope="scope">
              <!-- {{scope.row.description_image_path}} -->
              <img :src="scope.row.description_image_path" class="articleImag" />
            </template>
          </el-table-column>
          <el-table-column label="设置热门">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.hot"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
                @change="changeSwitch(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column property="category_name" label="标签"></el-table-column>
          <!-- 文章操作 -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="$router.push('/edit?id='+scope.row.id)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleArticleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="article-paging-wrap">
          <!-- 左侧分页数量显示 -->
          <div class="article-paging-left">
            <span>共 {{page.p}} 条</span> /
            <span>共 {{page.total}} 页</span> /
            <span>第 {{p}} 页</span>
          </div>
          <!-- 右侧分页点击事件显示 -->
          <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :page-count="page.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 搜索
      toSearch: "",
      // 筛选数据
      formInline: {
        category_id: "",
        hot: null
      },
      // 页数
      p: 1,
      // 文章列表显示
      article: [],
      // 分类显示
      category: [],
      page: {}
    };
  },
  methods: {
    // 筛选
    onSubmit(lean) {
      // 判断是否是 Number 类型
      let p = isNaN(lean) ? 1 : lean;
      this.p = p;
      // 根据 标签分类 与 热门 筛选文章
      this.$http({
        url: "api",
        params: {
          ...this.formInline,
          p
        }
      }).then(res => {
        let { page, pageList } = res.data;
        this.article = pageList;
        this.page = page;
      });
    },
    handleCurrentChange(val) {
      this.onSubmit(val);
    },
    // 设置热门
    changeSwitch(row) {
      this.$http({
        url: "api/sethot",
        params: {
          id: row.id,
          hot: row.hot
        }
      }).then(res => {
        // 判断是否设置成功
        if (res.data.code === 1) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    // 删除文章
    handleArticleDelete(id) {
      // 发送请求删除文章
      this.$http({
        method: "post",
        url: "api/delArticle",
        data: {
          id
        }
      }).then(res => {
        // 判断是否删除成功
        if (res.data.code === 1) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          // 获取删除文章的下标
          // let index = this.article.findIndex(e => e.id === id);
          // this.article.splice(index, 1);
          this.handleArticleList();
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    handleArticleList() {
      // size 设置每页显示条数
      this.$http({
        url: "api",
        params: {
          size: 10
        }
      }).then(res => {
        let { pageList, category, page } = res.data;
        // 将请求的hot手动设置 Boolean
        pageList.forEach(e => {
          e.hot === 1 ? true : false;
        });
        this.page = page;
        this.article = pageList;
        this.category = category;
      });
    }
  },
  mounted() {
    this.handleArticleList();
  }
};
</script>
<style scoped lang='less'>
#article {
  // 文章管理盒子
  .article-wrap {
    // 文章列表标题
    .article-list-title {
      margin: 0;
      padding: 0;
      height: 40px;
      padding-left: 30px;
      color: #fff;
      background: #0078ff;
      line-height: 40px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }
    // 文章列表盒子
    .article-list-wrap {
      padding: 0 30px;
      // 筛选
      .al-select-wrap {
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        // 筛选表单
        .el-form {
        }
        .articleAdd-wrap {
          .articleAdd {
            // 发布文章
            background: red;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            box-sizing: border-box;
          }
        }
        .srach-wrap{
          box-sizing: border-box;
          display: flex;
          padding: 0px 15px 20px;
        }
      }
      .articleImag {
        width: 100%;
      }
      .article-paging-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
      }
    }
  }
}
</style>